.box{
	width: 200px;
	height: 200px;
	border: 1px solid rebeccapurple;
	font-size: 30px;
	/* 浮动：让块级盒子水平摆放。
	浮动float：left（左浮动）right（右浮动） none（默认值，不动）
	特性：
	1.浮动的盒子会脱离标准流（脱标）
	2.浮动盒子会一行内显示并且盒子顶端对齐，一行装不下会另起一行。
	3.浮动的盒子与行内块元素有类似特性
	*/
   /* 传统网页布局:
	1.标准流
	2*/
	/* 清除浮动方法：
	1.额外标签法：隔离法。不建议使用
	2.给父级元素加overflow:hidden属性
	3.给父级元素添加after伪元素
	 4.给父级元素添加伪元素*/
	float: left;
	
}
.box2{
	width: 700px;
	height: 240px;
	border: 1px solid gold;
	font-size: 20px;
}
/* 第一种清楚浮动的方法：隔离法。 */
.clear{
	clear: both;/* 清楚两端浮动 */
}
/* 第二种清除浮动的方法 ：给父级元素加overflow:hidden属性*/
.bigbox{
	/* overflow: hidden; */
}
/* 第三种 ：给父级元素添加after伪元素*/
.clearfix::after{/* 伪类:在clearfix类的后面 */
	content: "";/* 内容为空 */
	display: block;/* 将伪类转换为块元素 */
	height: 0px;
	clear: both;/* 清楚两端浮动 */
	visibility: hidden;/* 显示状态:隐藏 */
}
/* 第四种清楚浮动方法: 给父级元素添加一个双伪元素*/
.clearfix::before,.clearfix::after{
	content: "";
	display: table;
}
.clearfix::after{
	clear: both;
}